<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../css/index.css">
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <!-- 面包屑 -->
  <nav aria-label="Breadcrumb" class="breadcrumb-link">
    <ol class="bread-center">
      <li class="breadcrumb-item" style="display: inline-block">
        <a href="/index.html" class="inactive">Home</a>
      </li>
      <span class="dm-border-line"></span>
      <li class="breadcrumb-item" style="display: inline-block">
        <a href="/index.html" class="inactive">Diamonds</a>
      </li>
      <span class="dm-border-line"></span>
      <li class="breadcrumb-item" style="display: inline-block">
        <a href="/faq.html" class="active">Lab grown and certified diamonds</a>
      </li>
    </ol>
  </nav>
  <section class="three-diamond-model">
    <h3 class="three-diamond-title">Princess Cut Diamonds</h3>
    <section class="pd-description-right">
      <aside class="pd-description-bar">
        <ol>
          <li class="selected">
            <img src="../../img/PC/app_img.png" alt="#">
          </li>
          <li>
            <img src="../../img/PC/categories_img.png" alt="#">
          </li>
          <li>
            <img src="../../img/PC/doc_pc.png" alt="#">
          </li>
        </ol>
      </aside>
      <section class="pd-products-img-container">
        <img src="" alt="#">
      </section>
      <!-- 3D图片切换 -->
      <section class="diamond-3d">
        <!-- 品牌占位，用于占位-->
        <div class="brand-badge" aria-hidden="true">
          <img class="brand-logo" src="../../img/PC/SAMLogo.svg" alt="">
        </div>
        <!-- 3D图片展示 -->
        <img class="show-3d-img" alt="#">
        <!-- 控制按钮 -->
        <div class="control-bar">
          <button class="btn-prev">
            <img class="player-btn" src="../../img/svg/left-forward.svg" alt="forward">
          </button>
          <button class="btn-toggle">
            <img class="player-btn" src="../../img/svg/pause.svg" alt="pause">
          </button>
          <button class="btn-next">
            <img class="player-btn" src="../../img/svg/right-back.svg" alt="back">
          </button>
        </div>
      </section>
    </section>
  </section>
  <!-- 富文本区域 -->
  <section class="large-text-editor">
    <h1>Become a diamond expert</h1>
    <span>
      A diamond’s beauty and value is owed to a number of traits. From the four main characteristics - cut, colour,
      clarity
      and carat weight - to the minuscule yet significant aspects like the girdle, culet and polish. Arm yourself with
      the
      knowledge of a diamond’s makeup to help you find the best quality diamonds, at the best price.
    </span>
  </section>
  <!-- 产品大分类页区域 -->
  <section class="general-categories-content">
    <!-- 左边展开下拉区域 -->
    <div class="left-expand-down">
      <!-- 已选择的信息分类数据 -->
      <div class="selected-category-info">
      </div>
      <!-- Diamond Shape -->
      <div class="dm-info-expand-content">
        <div class="dm-info-expand-content-title">
          Diamond Shape
          <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M5 5.71429C4.70519 5.71429 4.41374 5.60359 4.18928 5.37884L0.246231 1.43067C-0.082077 1.10529 -0.082077 0.571932 0.246231 0.246551C0.574539 -0.0821837 1.10385 -0.0821837 1.42881 0.246551L5 3.82238L8.57119 0.246551C8.8995 -0.0821837 9.42881 -0.0821837 9.75377 0.246551C10.0821 0.575286 10.0821 1.10529 9.75377 1.43067L5.81072 5.37884C5.58626 5.60359 5.29481 5.71429 5 5.71429Z"
              fill="#586168" />
          </svg>
        </div>
        <!-- 展示的内容 -->
        <div class="dm-shape-content">
        </div>
      </div>
      <!-- Diamond Size -->
      <div class="dm-size-expand-content">
        <div class="dm-size-expand-content-title">
          Diamond Size
          <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M5 5.71429C4.70519 5.71429 4.41374 5.60359 4.18928 5.37884L0.246231 1.43067C-0.082077 1.10529 -0.082077 0.571932 0.246231 0.246551C0.574539 -0.0821837 1.10385 -0.0821837 1.42881 0.246551L5 3.82238L8.57119 0.246551C8.8995 -0.0821837 9.42881 -0.0821837 9.75377 0.246551C10.0821 0.575286 10.0821 1.10529 9.75377 1.43067L5.81072 5.37884C5.58626 5.60359 5.29481 5.71429 5 5.71429Z"
              fill="#586168" />
          </svg>
        </div>
        <div class="dm-size-content">
          <div class="slider-container">
            <div class="slider-track" id="dm-size-slider">
              <div class="slider-range" id="dm-size-slider-range"></div>
              <div class="slider-thumb" id="dm-size-thumb-min"></div>
              <div class="slider-thumb" id="dm-size-thumb-max"></div>
            </div>
            <!-- 输入框 -->
            <div class="range-values">
              <input type="number" id="dm-size-min-input" step="0.01" value="1.36">
              <input type="number" id="dm-size-max-input" step="0.01" value="56.77">
            </div>
          </div>
        </div>
      </div>
      <!-- Diamond Carat Weight -->
      <div class="dm-weight-expand-content">
        <div class="dm-weight-expand-content-title">
          Carat Weight
          <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M5 5.71429C4.70519 5.71429 4.41374 5.60359 4.18928 5.37884L0.246231 1.43067C-0.082077 1.10529 -0.082077 0.571932 0.246231 0.246551C0.574539 -0.0821837 1.10385 -0.0821837 1.42881 0.246551L5 3.82238L8.57119 0.246551C8.8995 -0.0821837 9.42881 -0.0821837 9.75377 0.246551C10.0821 0.575286 10.0821 1.10529 9.75377 1.43067L5.81072 5.37884C5.58626 5.60359 5.29481 5.71429 5 5.71429Z"
              fill="#586168" />
          </svg>
        </div>
        <div class="dm-weight-content">
          <div class="slider-container">
            <div class="slider-track" id="dm-weight-slider">
              <div class="slider-range" id="dm-weight-slider-range"></div>
              <div class="slider-thumb" id="dm-weight-thumb-min"></div>
              <div class="slider-thumb" id="dm-weight-thumb-max"></div>
            </div>
            <!-- 输入框 -->
            <div class="range-values">
              <div class="input-group">
                <input type="number" id="dm-weight-min-input" step="0.01" value="1.36">
                <div class="addon">mm</div>
              </div>
              <div class="input-group">
                <input type="number" id="dm-weight-max-input" step="0.01" value="56.77">
                <div class="addon">mm</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 钻石颜色选择 -->
      <div class="dm-color-expand-content">
        <div class="dm-color-expand-content-title">
          Color
          <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M5 5.71429C4.70519 5.71429 4.41374 5.60359 4.18928 5.37884L0.246231 1.43067C-0.082077 1.10529 -0.082077 0.571932 0.246231 0.246551C0.574539 -0.0821837 1.10385 -0.0821837 1.42881 0.246551L5 3.82238L8.57119 0.246551C8.8995 -0.0821837 9.42881 -0.0821837 9.75377 0.246551C10.0821 0.575286 10.0821 1.10529 9.75377 1.43067L5.81072 5.37884C5.58626 5.60359 5.29481 5.71429 5 5.71429Z"
              fill="#586168" />
          </svg>
        </div>
        <div class="dm-color-content">
          <div class="color-slider-container" id="slider">
            <div class="color-slider-track" id="slider-track">
              <div class="track-block"></div>
              <div class="track-block"></div>
              <div class="track-block"></div>
              <div class="track-block"></div>
              <div class="track-block"></div>
              <div class="track-block"></div>
              <div class="track-block"></div>
            </div>
            <div class="color-slider-thumb" id="color-thumb"></div>
            <div class="slider-labels">
              <span>J</span>
              <span>I</span>
              <span>H</span>
              <span>G</span>
              <span>F</span>
              <span>E</span>
              <span>D</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右边展示全部产品区域或者我喜欢的产品区域 -->
    <div class="right-show-all-products">
      <div class="products-header-info">
        <div class="header-info-left">
          <p>All Diamonds <span></span></p>
        </div>

        <div class="header-info-right">
          <p>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M11.4645 0.699219C10.1033 0.699219 8.84138 1.38433 8.00298 2.51103C7.17378 1.38424 5.90278 0.699219 4.54158 0.699219C2.08982 0.699219 0.0976562 2.88061 0.0976562 5.55779C0.0976562 7.15326 0.809728 8.28008 1.38661 9.18144C3.05424 11.8046 7.25485 15.0586 7.43503 15.1939C7.59631 15.3225 7.79659 15.3925 8.00291 15.3922C8.20121 15.3922 8.39952 15.3291 8.57077 15.1939C8.75112 15.0586 12.9426 11.7955 14.6193 9.18144C15.1962 8.28 15.9083 7.15327 15.9083 5.55779C15.9084 2.88061 13.9163 0.699219 11.4645 0.699219H11.4645ZM13.4745 9.15438C11.9332 11.3177 8.67014 13.7876 8.5078 13.9047C8.35459 14.022 8.17424 14.0851 8.003 14.0851C7.82272 14.0851 7.65145 14.031 7.49824 13.9047C7.33592 13.7877 4.13597 11.2908 2.53145 9.0643C2.0177 8.25303 1.1974 7.24345 1.1974 5.8193C1.1974 3.42149 2.53147 1.73591 4.72193 1.73591C5.93883 1.73591 7.26394 2.8987 8.003 3.90828C8.75121 2.89872 10.0672 1.73592 11.2841 1.73592C13.4835 1.73592 14.9079 3.42149 14.9079 5.81932C14.9079 7.24336 13.9973 8.35212 13.4745 9.15438Z"
                fill="#242424" />
            </svg>
            Compare<span></span>
          </p>
        </div>
      </div>
      <!-- 全部展品的展示区域 -->
      <section class="all-products-content">
        <div class="all-products-body">

        </div>
      </section>
      <!-- 我收藏的展品展示区域 -->
      <section class="my-collection-content">

      </section>
    </div>
  </section>
  <!-- 联系我们弹框 -->
  <section class="contact-dialog">
    <!-- 遮罩层 -->
    <div class="dm-overlay-dialog">
      <header>
        <span class="dm-dialog-title">
          Contact us
        </span>
        <span class="dm-header-close-btn">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M0.166504 6.0013C0.166504 2.77955 2.7775 0.167969 5.99984 0.167969C9.22159 0.167969 11.8332 2.77897 11.8332 6.0013C11.8332 9.22305 9.22217 11.8346 5.99984 11.8346C2.77809 11.8346 0.166504 9.22364 0.166504 6.0013ZM5.99984 5.58889L4.55492 4.14368C4.52782 4.11677 4.49569 4.09546 4.46036 4.08097C4.42502 4.06648 4.38718 4.05909 4.34899 4.05923C4.3108 4.05937 4.27302 4.06702 4.23779 4.08176C4.20256 4.0965 4.17058 4.11804 4.14367 4.14514C4.11647 4.17198 4.09484 4.20394 4.08003 4.23918C4.06523 4.27442 4.05754 4.31224 4.0574 4.35046C4.05727 4.38868 4.06469 4.42655 4.07924 4.46189C4.0938 4.49723 4.1152 4.52935 4.14221 4.55639L5.58742 6.0013L4.14221 7.44622C4.1153 7.47332 4.094 7.50545 4.07951 7.54078C4.06502 7.57612 4.05763 7.61396 4.05777 7.65215C4.0579 7.69033 4.06556 7.72812 4.0803 7.76335C4.09504 7.79858 4.11657 7.83056 4.14367 7.85747C4.17052 7.88467 4.20248 7.9063 4.23772 7.92111C4.27295 7.93591 4.31077 7.9436 4.34899 7.94374C4.38721 7.94387 4.42508 7.93645 4.46042 7.9219C4.49577 7.90734 4.52788 7.88594 4.55492 7.85893L5.99984 6.41372L7.44475 7.85893C7.47185 7.88584 7.50399 7.90714 7.53932 7.92163C7.57465 7.93612 7.61249 7.94351 7.65068 7.94337C7.68887 7.94324 7.72666 7.93558 7.76189 7.92084C7.79712 7.9061 7.8291 7.88457 7.856 7.85747C7.88321 7.83062 7.90484 7.79866 7.91964 7.76342C7.93445 7.72819 7.94214 7.69037 7.94227 7.65215C7.94241 7.61393 7.93499 7.57606 7.92043 7.54071C7.90588 7.50537 7.88448 7.47326 7.85746 7.44622L6.41225 6.0013L7.85746 4.55639C7.88437 4.52929 7.90568 4.49715 7.92017 4.46182C7.93466 4.42649 7.94205 4.38865 7.94191 4.35046C7.94177 4.31227 7.93412 4.27448 7.91938 4.23925C7.90464 4.20402 7.8831 4.17204 7.856 4.14514C7.82916 4.11793 7.79719 4.0963 7.76196 4.0815C7.72672 4.06669 7.6889 4.059 7.65068 4.05887C7.61246 4.05873 7.57459 4.06615 7.53925 4.08071C7.50391 4.09526 7.47179 4.11666 7.44475 4.14368L5.99984 5.58889Z"
              fill="#D2D2D1" />
          </svg>
        </span>
      </header>
      <div class="dm-dialog-body">
        <form class="refDialogWrite" id="refDialogWrite" action="" method="post" enctype="multipart/form-data">
          <div class="form-content">
            <!-- you name -->
            <div class="form-item">
              <span class="form-item-label"><span style="color: #ff5858">*</span>Your Name </span>
              <div class="dm-item-input">
                <input type="text" name="consultingName" id="consultingName" />
              </div>
              <div class="error-message">Please enter your name</div>
            </div>
            <!-- company name-->
            <div class="form-item  not-error-info">
              <span class="form-item-label ">Company Name</span>
              <div class="dm-item-input">
                <input type="text" name="companyName" id="companyName" />
              </div>
            </div>
            <!--Your Email-->
            <div class="form-item">
              <span class="form-item-label"><span style="color: #ff5858">*</span>Your Email </span>
              <div class="dm-item-input">
                <input type="text" name="email" id="email" />
              </div>
              <div class="error-message">Please enter your email</div>
            </div>
            <!-- Country -->
            <div class="form-item">
              <span class="form-item-label"><span style="color: #ff5858">*</span>Country</span>
              <div class="select-dropdown">
                <p></p>
                <input type="hidden" name="country" id="country" />
                <svg class="select-arrows" width="16" height="7" viewBox="0 0 16 7" fill="none"
                  xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 0.999272L8 5.70898L15 0.999272" stroke="#868686" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
                </svg>
                <ul id="countryList">
                </ul>
              </div>
              <div class="error-message">Please select your country</div>

            </div>
            <!--Phone number-->
            <div class="form-item">
              <span class="form-item-label"><span style="color: #ff5858">*</span>Phone number</span>
              <div class="dm-item-input">
                <input type="text" name="PhoneNumber" id="PhoneNumber" />
              </div>
              <div class="error-message">Please enter your number</div>
            </div>
            <!-- call back (移动端)-->
            <div class="form-item not-error-info is-move">
              <div class="item-call-back">
                <input type="checkbox" name="checkbox" id="checkbox" checked="checked">
                <span class="call-tips">
                  Yes, please call me back
                </span>
              </div>
            </div>
            <!--message-->
            <div class="form-item">
              <span class="form-item-label"><span style="color: #ff5858">*</span>Message</span>
              <div class="dm-item-input">
                <input type="text" name="message" id="message" />
              </div>
              <div class="error-message">Please enter your Message</div>
            </div>
            <!-- call back(PC 端) -->
            <div class="form-item not-error-info is-pc">
              <div class="item-call-back">
                <input type="checkbox" name="checkbox" id="checkbox" checked="checked">
                <span class="call-tips">
                  Yes, please call me back
                </span>
              </div>
            </div>
            <!-- 谷歌验证码 -->
            <div class="form-item">
              <div class="g-recaptcha" data-sitekey="6Ld2Y7AqAAAAAJSkpkIMDDM0bv0p6ypbtejaO_hc"></div>
            </div>
          </div>
        </form>
        <button class="dm-dialog-btn">Send message</button>
      </div>
    </div>
  </section>


  <!-- jQuery CDN -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
  <script defer src='https://www.google.com/recaptcha/api.js?hl=en-us'></script>
  <script src="../../js/utils/dropdownOptions.js"></script>
  <script src="../../js/utils/enum.js"></script>
  <script src="../../js/utils/regExp.js"></script>
  <script src="../../js/utils/storage.js"></script>
  <script src="../../js/utils/index.js"></script>
  <script src="./index.js"></script>
</body>

</html>